<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>歌曲管理</title>
		<script src="../../js/vue.js"></script>
		<script src="../../js/element.js"></script>
		<script src="../../js/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="../../css/element.css" />
		<!-- iframe 基本通用样式 -->
		<link rel="stylesheet" type="text/css" href="../../css/common/iframe.css" />
		<!-- 阿里图标库 -->
		<link rel="stylesheet" type="text/css" href="../../fonts/iconfont/iconfont.css" />
	</head>
	<body>
		<div id="app">
			<div class="header">
				<i class="el-icon-postcard"></i>
				音乐管理/歌曲管理
			</div>
			<div class="main">
				<el-input placeholder="请输入歌曲名称" size="mini" v-model="name" style="width:150px"></el-input>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="getPageInfo">搜索</el-button>
				<el-button type="primary" icon="el-icon-plus" size="mini" @click="openAddForm()">添加</el-button>
				<el-button type="danger" icon="el-icon-delete" size="mini" @click="deteleBatch">批量删除</el-button>
				<!-- 列表数据 -->
				<table class="listTable" border="1px">
					<tr>
						<th>
							<input type="checkbox" class="chexkbox" @change="allSelect" :checked="isAllSelect">
						</th>
						<th>歌曲</th>
						<th>歌手</th>
						<th>专辑</th>
						<th>歌曲图片</th>
						<th>歌词</th>
						<th>试听</th>
						<th>状态</th>
						<th>备注</th>
						<th width="150">基本操作</th>
					</tr>
					<tr v-for="item in list">
						<td>
							<input type="checkbox" style="width:20px" :value="item.songId" :checked="isAllSelect"
								@change="ckSelect">
						</td>
						<td>{{item.songName}}</td>
						<td>
							<el-tag size="small" type="success" v-for="i in item.singer" style="margin-right: 5px;">
								{{i}}
							</el-tag>
						</td>
						<td>
							<el-tag size="small" type="success" style="margin-right: 5px; display: inline-block;" v-if="item.album!=null">
								{{item.album}}
							</el-tag>
						</td>
						<td><img :src="item.songImg" width="20px"></td>
						<td>{{item.songLyric}}</td>
						<td><audio :src="item.songUrl" controls style="height: 30px;"></audio></td>
						<td>
							<el-switch v-model="item.songStatus" active-color="#13ce66" inactive-color="#ff4949"
								:active-value="0" :inactive-value="1"
								@change="changeStatus(item.songId,item.songStatus)">
							</el-switch>
						</td>
						<td>{{item.remarks}}</td>
						<td style="width:150px">
							<!-- 添加歌手、专辑 -->
							<span style="padding-right:8px">
								<el-button type="primary" size="mini" @click="addSinger(item.songId)" circle>
									<i class="iconfont icon-zhuanjiguangpan" style="font-size: 12px;"></i>
								</el-button>
							</span>
							<!-- 修改 -->
							<span style="padding-right:8px">
								<el-button type="primary" icon="el-icon-edit" size="mini" @click="update(item.songId)"
									circle>
								</el-button>
							</span>
							<!-- 删除 -->
							<span>
								<el-button type="danger" icon="el-icon-delete" size="mini"
									@click="deleteById(item.songId)" circle>
								</el-button>
							</span>
						</td>
					</tr>
				</table>
				<!-- 分页 -->
				<div class="block">
					<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
						:current-page="pageCurrent" :page-sizes="[4, 8]" :page-size="pageSize"
						layout="total, sizes, prev, pager, next, jumper" :total="total">
					</el-pagination>
				</div>

				<!-- 添加表单 -->
				<el-dialog id="el-dialog" title="添加歌曲" :visible.sync="addFormVisible" width="40%">
					<el-form class="addform" :model="addFrom" ref="addForm" label-position="right" label-width="70px"
						size="mini" :rules="rules">
						<el-form-item label="歌曲名" prop="songName">
							<el-input v-model="addFrom.songName" placeholder="请输入歌曲名" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/song/uploadAddImg" :on-change="handleChangeAddImg"
								:headers="headers" :on-success="uploadAddImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="歌词">
							<el-upload ref="uploadLyric" class="upload-demo"
								action="http://localhost:8080/song/uploadAddLrc" :on-change="handleChangeAddLrc"
								:headers="headers" :on-success="uploadAddLrcSuccess" :file-list="fileLrcList"
								:before-upload="beforeUploadAddLrc" :show-file-list="showLrcFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 txt 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="歌曲">
							<el-upload ref="uploadMp3" class="upload-demo"
								action="http://localhost:8080/song/uploadAddMp3" :on-change="handleChangeAddMp3"
								:headers="headers" :on-success="uploadAddMp3Success" :file-list="fileMp3List"
								:before-upload="beforeUploadAddMp3" :show-file-list="showMp3FileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 mp3 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="addFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="addSubmit" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 修改表单 -->
				<el-dialog id="el-dialog" title="修改歌曲信息" :visible.sync="updateFormVisible" width="40%">
					<el-form class="updateform" :model="updateFrom" ref="updateForm" label-position="right"
						label-width="70px" size="mini" :rules="rules">
						<el-form-item label="歌曲名" prop="songName">
							<el-input v-model="updateFrom.songName" placeholder="请输入歌曲名" style="width:200px">
							</el-input>
						</el-form-item>
						<el-form-item label="状态">
							<el-radio v-model="updateFrom.songStatus" :label="0">正常</el-radio>
							<el-radio v-model="updateFrom.songStatus" :label="1">异常</el-radio>
						</el-form-item>
						<el-form-item label="图片">
							<el-upload ref="uploadImage" class="upload-demo"
								action="http://localhost:8080/song/uploadAddImg" :on-change="handleChangeAddImg"
							    :headers="headers" :on-success="uploadUpdateImgSuccess" :file-list="fileImgList" list-type="picture"
								:before-upload="beforeUploadAddImg" :show-file-list="showImgFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 image 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="歌词">
							<el-upload ref="uploadLyric" class="upload-demo"
								action="http://localhost:8080/song/uploadAddLrc" :on-change="handleChangeAddLrc"
								:headers="headers" :on-success="uploadUpdateLrcSuccess" :file-list="fileLrcList"
								:before-upload="beforeUploadAddLrc" :show-file-list="showLrcFileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 txt 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
						<el-form-item label="歌曲">
							<el-upload ref="uploadMp3" class="upload-demo"
								action="http://localhost:8080/song/uploadAddMp3" :on-change="handleChangeAddMp3"
							    :headers="headers" :on-success="uploadUpdateMp3Success" :file-list="fileMp3List"
								:before-upload="beforeUploadAddMp3" :show-file-list="showMp3FileList">
								<el-button size="small" type="primary">选择文件</el-button>
								<div slot="tip" class="el-upload__tip">只能上传 mp3 文件，且不超过30MB</div>
							</el-upload>
						</el-form-item>
					</el-form>
					<div slot="footer">
						<el-button @click="updateFormVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="updateSubmit(updateFrom.songId)" size="mini">提 交</el-button>
					</div>
				</el-dialog>

				<!-- 添加歌手、专辑表单 -->
				<el-dialog id="el-dialog" title="添加歌手和专辑表单" :visible.sync="singerVisible" width="40%">
					<el-form label-position="right">
						<el-form-item label="歌手名">
							<el-input @blur="getSingerByName(addSingerList.singerName)"
								v-model="addSingerList.singerName" placeholder="请输入歌手名" style="width:200px">
							</el-input>
						</el-form-item>

						<!-- 查询到的歌手信息 当值改变时（@change），根据 歌手id 查询 此歌手的专辑 -->
						<el-form-item label="歌手">
							<el-radio v-model="singerId" :label="singer.singerId" v-for="singer in singerList"
								@change="getAlbumBySingerId(singerId)">
								<el-tooltip class="item" effect="dark" :content="singer.singerRemarks" placement="top">
									<span>
										{{singer.singerName}}
									</span>
								</el-tooltip>
							</el-radio>
						</el-form-item>

						<!-- 查询到的专辑信息 -->
						<el-form-item label="歌手专辑">
							<el-radio v-model="albumId" :label="album.albumId" v-for="album in albumList">
								<el-tooltip class="item" effect="dark" :content="album.albumRemarks" placement="top">
									<span>
										{{album.albumName}}
									</span>
								</el-tooltip>
							</el-radio>
						</el-form-item>

					</el-form>
					<div slot="footer">
						<el-button @click="singerVisible = false" size="mini">取 消</el-button>
						<el-button type="primary" @click="addSingerSubmit(addSongId, singerId, albumId)" size="mini">提 交
						</el-button>
					</div>
				</el-dialog>

			</div>
		</div>
	</body>
	<script src="../../js/menus/song.js"></script>
</html>
